<template>
  <div class="payIndex">
    <div class="payIndex-left">
      <h4>计费管理/缴费类型管理</h4>
      <el-form :inline="true" ref="form" :model="form" class="demo-form-inline">
        <el-form-item>
          <el-input prop="paymoney" style="width: 240px" v-model="form.paymoney" placeholder="项目价格"></el-input>
        </el-form-item>

        <el-form-item>
          <el-select v-model="str" style="width: 200px" clearable placeholder="通知状态">
            <el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <el-tree style="width: 500px" :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
    </div>
    <div class="payIndex-right">
      <div class="payIndex-right-top">
        <h2>{{ title }}</h2>
        <p>
          <el-button @click="handleClick" icon="el-icon-search" type="primary">查询</el-button>
          <el-button @click="handleAdd" icon="el-icon-plus" type="success">新增</el-button>
          <el-button @click="handleRefresh" icon="el-icon-refresh" type="primary">刷新</el-button>
          <el-button icon="el-icon-upload2" type="primary">导出</el-button>
        </p>
      </div>
      <p style="width: 960px">
        <el-table :data="tableData" border style="width: 100% ;height: 388px;">
          <el-table-column prop="payname" label="缴费项目名称">
          </el-table-column>

          <el-table-column prop="paylevel" label="缴费项目优先级">
          </el-table-column>

          <el-table-column prop="paynum" label="项目用量/时长">
          </el-table-column>

          <el-table-column prop="paymoney" label="项目价格"> </el-table-column>

          <el-table-column prop="paytime" label="创建时间">
            <template slot-scope="scope">
              {{ scope.row.paytime.substring(0, 10)
              }} 
            </template>
          </el-table-column>

          <el-table-column prop="username" label="通知人">
            <template slot-scope="scope">
              <span v-if="scope.row.username == null">暂无</span>
              <span v-else>{{ scope.row.username }}</span>
            </template>
          </el-table-column>

          <el-table-column prop="paystatus" label="状态">
            <template slot-scope="scope">
              <span v-if="scope.row.paystatus == 1">已通知</span>
              <span v-else>未通知</span>
            </template>
          </el-table-column>

          <el-table-column label="操作" width="210">
            <template slot-scope="scope">
              <el-button @click="dialogVisible = true" plain mini>通知</el-button>
              <el-button @click="handleView(scope.row)" type="primary" mini>查看</el-button>
              <el-button @click="handleDel(scope.row)" type="danger" mini>作废</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange1"
          :current-page="currentPage4" :page-sizes="[10, 50, 100, 200]" :page-size="10"
          layout="total, sizes, prev, pager, next, jumper" :total="this.obj.total">
        </el-pagination>
      </p>
    </div>

    <!-- 模态框 -->

    <el-dialog title="计费通知" :visible.sync="dialogVisible" width="60%" :before-close="handleClose">

      <el-form :inline="true" :model="form2" class="demo-form-inline">
        <el-form-item>
          <el-input style="width:400px" v-model="form2.user" placeholder="请输入用户账号"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="onSubmit"></el-button>
        </el-form-item>

        <el-form-item>
          <el-button @click="handleReset" icon="el-icon-refresh-right" type="warning">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table border ref="singleTable" :data="tableDatas2" highlight-current-row @current-change="handleCurrentChange"
        style="width: 100%">
        <el-table-column label="序号" type="index" width="50">
        </el-table-column>
        <el-table-column property="nickname" label="用户账号">
          <template slot-scope="scope">
            <span v-if="scope.row.nickname == ''">暂无</span>
            <span v-else>{{ scope.row.nickname }}</span>
          </template>
        </el-table-column>
        <el-table-column property="homeaddress" label="家庭住址">
          <template slot-scope="scope">
            <span v-if="scope.row.homeaddress == null">暂无</span>
            <span v-else>{{ scope.row.homeaddress }}</span>
          </template>
        </el-table-column>
        <el-table-column property="type" label="类型">
          <template slot-scope="scope">
            <span v-if="scope.row.type == 1">管理员</span>
            <span v-else>普通用户</span>
          </template>
        </el-table-column>

        <el-table-column property="coststatus" label="缴费状态">
          <template slot-scope="scope">
            <span v-if="scope.row.coststatus == 1">已缴费</span>
            <span v-else>未缴费</span>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination @size-change="handleSizeChange"
        @current-change="handleCurrentChange2" :current-page="currentPage3" :page-sizes="[10, 50, 100, 200]"
        :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="this.obj.total2">
      </el-pagination>


      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleQrtz">通 知</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
export default {
  data() {
    return {
      form2: {
        user: ""
      },
      dialogVisible: false,
      currentPage3: 1,
      currentPage4: 1,
      type: "ADD",
      title: "电费目录",
      c_id: 7,
      str: "",
      options: [
        {
          value: 2,
          label: "未通知",
        },
        {
          value: 1,
          label: "已通知",
        },
      ],
      form: {
        paymoney: "", //项目价格
      },
      formInline: {
        payname: "", //缴费项目名称
        paylevel: "", //缴费项目优先级
        paynum: "", //项目用量时长
        paymoney: "", //项目价格
        paytime: "", //创建时间
        username: "", //通知人
        paystatus: "",//状态
      },
      form3: {
        u_id: "",
        c_id: "",
        coststatus: "",
        paystatus: "",
        username: ""
      },
      data: [
        {
          label: "缴费项目",
          children: [
            {
              label: "电费项目",
              children: [
                {
                  label: "电费目录表",
                },
              ],
            },
            {
              label: "水费项目",
              children: [
                {
                  label: "水费固定月目录表",
                },
                {
                  label: "水费按量计价格目录表",
                },
              ],
            },
            {
              label: "天然气项目",
              children: [
                {
                  label: "天然气目录表",
                },
              ],
            },
            {
              label: "物业费项目",
              children: [
                {
                  label: "物业费目录表",
                },
              ],
            },
            {
              label: "宽带项目",
              children: [
                {
                  label: "宽带费目录表",
                },
              ],
            },
          ],
        },
      ],
      obj: {
        // 页码
        page: 1,
        // 每页多少条
        rows: 10,
        // 默认选中哪一页
        currentPage: 1,
        // 定义总条数
        total: null,
        total2: null,
      },
      defaultProps: {
        children: "children",
        label: "label",
      },
      tableData: [],
      tableDatas2: [],
      currentRow: null,
    };
  },
  methods: {
    //列表/查询
    handleClick() {
      this.$Axios({
        url: "/cost/getCostData",
        method: "get",
        data: {
          c_id: this.c_id,
          paymoney: this.form.paymoney,
          paystatus: this.str,
          currPage: this.obj.page - 1,
          pageNum: this.obj.rows,
        },
        success: (result) => {
          setTimeout(() => {
            this.obj.total = result.total;
            this.tableData = result.data;
          }, 200);
        },
      });
    },
    //刷新
    handleRefresh() {
      // 清空验证并清空内容
      this.form.paymoney = "";
      this.str = null;
      this.handleClick();
    },
    //作废
    handleDel(row) {
      this.$confirm("确定永久作废这条计费项目？", "提示", {
        distinguishCancelAndClose: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(() => {
          this.$Axios({
            url: "/cost/delCostData",
            method: "get",
            data: {
              id: row.id,
            },
            success: (result) => {
              setTimeout(() => {
                this.$message({
                  message: "作废该条计费项目成功",
                  type: "success",
                });
                this.handleClick();
              }, 200);
            },
          });
        })
        .catch((action) => {
          this.$message({
            type: "info",
            message: action === "cancel" ? "已取消作废该条计费项目" : "停留在当前页面",
          });
        });
    },
    //缴费项目
    handleNodeClick(data) {
      if (data.$treeNodeId == 3) {
        this.c_id = 7
        this.handleClick();
      } else if (data.$treeNodeId == 5) {
        this.title = "水费固定月目录"
        this.c_id = 8
        this.handleClick();
      } else if (data.$treeNodeId == 6) {
        this.title = "水费按量目录"
        this.c_id = 9
        this.handleClick();
      } else if (data.$treeNodeId == 8) {
        this.title = "天然气目录"
        this.c_id = 10
        this.handleClick();
      } else if (data.$treeNodeId == 10) {
        this.title = "物业费目录"
        this.c_id = 11
        this.handleClick();
      } else if (data.$treeNodeId == 12) {
        this.title = "宽带费目录"
        this.c_id = 12
        this.handleClick();
      }
    },
    //新增
    handleAdd() {
      this.$router.push({
        path: "/pay/payAdd",
        query: {
          type: this.type,
          paystatus: 2
        },
      });
    },
    //查看
    handleView(row) {
      this.type = "DETAIL"
      this.$router.push({
        path: "/pay/payAdd",
        query: {
          type: this.type,
          detailId: row.id
        },
      });
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.obj.rows = val;
      this.handleClick();
      this.handleInform()
    },
    handleCurrentChange1(val) {
      console.log(`当前页: ${val}`);
      this.obj.page = val;
      this.handleClick();
    },
    handleCurrentChange2(val) {
      console.log(`当前页: ${val}`);
      this.obj.page = val;
      this.handleInform()
    },

    //关闭模态框
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    },
    //通知
    handleInform() {
      this.$Axios({
        url: "/users/getUserList",
        method: "get",
        data: {
          username: this.form2.user,
          currPage: this.obj.page - 1,
          pageNum: this.obj.rows,
        },
        success: (result) => {
          setTimeout(() => {
            this.obj.total2 = result.total;
            this.tableDatas2 = result.data;
          }, 200);
        },
      });
    },
    //模态框查询
    onSubmit() {
      this.handleInform()
    },
    //模态框重置
    handleReset() {
      this.form2.user = null
    },
    //表格单选
    handleCurrentChange(val) {
      // this.currentRow = val;
      console.log(val, "111111")
      this.form3.c_id = val.c_id
      this.form3.u_id = val.id
      this.form3.paystatus = val.parkstatus
      this.form3.coststatus = val.coststatus
      this.form3.username = val.username
    },
    //确认通知
    handleQrtz() {
      this.$confirm("确定通知改用用户缴费?", "提示", {
        distinguishCancelAndClose: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(() => {
          this.$Axios({
            url: "/cost/updateCostData",
            method: "post",
            data: {
              u_id: this.form3.u_id,
              c_id: this.form3.c_id,
              coststatus: this.form3.coststatus,
              paystatus: this.form3.parkstatus,
              username: this.form3.username
            },
            success: (result) => {
              setTimeout(() => {
                this.$message({
                  message: "通知改用用户缴费成功",
                  type: "success",
                });
                this.dialogVisible = false
                this.handleClick();
              }, 200);
            },
          });
        })
        .catch((action) => {
          this.$message({
            type: "info",
            message: action === "cancel" ? "已取消通知改用用户缴费" : "停留在当前页面",
          });
        });
    }
  },
  mounted() {
    this.handleClick();
    this.handleInform()
  },
};
</script>
<style lang="scss" scoped>
.payIndex::v-deep {
  display: flex;
  justify-content: space-between;


  h4 {
    padding: 20px 0;
  }

  .payIndex-right {
    width: 960px;
    margin-top: 60px;

    .payIndex-right-top {
      margin-bottom: 40px;
      display: flex;
      justify-content: space-between;
    }
  }

  .has-gutter {
    tr {
      th {
        background: #eef1f6;
        text-align: center;
        color: #000;
        font-size: 14px;
        border-right-color: #ddd;
      }
    }
  }

  .el-table__row {
    td {
      text-align: center;
    }
  }

  .el-pagination {
    text-align: right;
    margin-top: 20px;
  }
}
</style>
